<template>
	<view>
<!-- 		<uni-nav-bar statusBar="true" :fixed="true" :border="false" backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				{{i18n.index}}
				<view class="left" @tap.stop="back">
					<uni-icon type="back" color="#ffffff" size="30"></uni-icon>
				</view>
				<view class="content">
					{{i18n.TransferOut}}
				</view>
				<view>
				</view>
			</view>
		</uni-nav-bar> -->
		<view class="translate-content">
			<picker mode="selector" :value="index" range-key="title_en" :range="cur" @change="checkToken">
				<view class="translate-curr-item">
					<image :src="info.logo" mode="widthFix" lazy-load></image>
					<view class="translate-curr-txt">
						<view class="translate-curr-txt-c">
							<view>{{info.title_en}}</view>
							<text>{{info.title_zh}}</text>
						</view>
						<view>
							<text>{{i18n.yu_e_bao}}{{i18n.Balance}}</text>
							<view>
								{{info.financial}}
							</view>
						</view>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
			</picker>
		</view>
		<view class="translate-content">
			<view class="translate-num-item">
				<view class="title">{{i18n.trans_out_number}}</view>
				<view class="content">
					
					<input type="text" value="" :placeholder="i18n.trans_out_number" v-model="num"/>
					<text @tap.stop="all">{{i18n.all}}</text>
				</view>
				<!-- <text>这是一小串鸡巴小字我不知道是什么</text> -->
			</view>
			
			<view class="translate-num-item">  
				<view class="title">{{i18n.paypwds}}</view>
				<view class="content">
					<input type="text" value="" password :placeholder="i18n.p_enter_paddword" v-model="paypwd"/>
				</view>
			</view>
			<view class="translate-btn-item" @tap.stop="translate">
				{{i18n.confirm}}{{i18n.TransferOut}}
			</view>   
		</view>     
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import {mapGetters, mapMutations} from 'vuex';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang',
				'getCoin'
			])
		},
		components:{
			uniNavBar,uniIcon
		},
		data() {
			return {
				num:'',
				paypwd:'',
				tip:'',
				address:'',
				info:{},
				cur:[],
				predesadas:''
			}
		},
		onLoad(e) {
			if(!this.getLoginInfo.paypwd){
				uni.showModal({ //提醒用户更新
					title: this.i18n.message,   
					content: this.i18n.have_no_paypwd,  
					success: (res) => {  
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/modify-pwd/modify-pwd'
							})											 
						}else{
							
						}
					},
					fail:(err)=>{
						showToast(fail)
					}
				})
			}
			
			this.cur = JSON.parse(e.item)
			this.info = JSON.parse(e.item)[0]
			this.predesadas = this.getLoginInfo.pay_key
			// setInterval(()=>{
			// 	this.func();
			// },1)
		},
		methods:{
			func(){
				let url = this.getRequestUrl + '/api/Wallet/zc_financial'
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					token_id:this.info.token_id,
					pay_key:this.predesadas,
					num:100,
					pay_pwd:111111
				}
				fetch(url,data,"POST").then(res=>{
					// showToast(res.data.msg)
					if(res.data.code){
						this.predesadas= res.data.msg
					}
				})
			},
			all(){
				this.num = this.info.financial
			},
			checkToken(e){
				let index = e.detail.value;
				this.info = this.cur[index]
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			translate(){
				if(!this.num){
					showToast(this.i18n.p_enter_trans_out)
					return
				}
				if(!this.paypwd){
					showToast(this.i18n.p_enter_paddword)
					return
				}
				let url = this.getRequestUrl + '/api/Wallet/zc_financial'
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					token_id:this.info.token_id,
					num:this.num,
					pay_pwd:this.paypwd
				}
				fetch(url,data,"POST").then(res=>{
					showToast(res.data.msg)
					if(res.data.code){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				}) 
			}
		}
	}
</script>
<style>
	page{
		background-color: #f5f4f7;
		/* background: linear-gradient(to top,#32B9FF,#32B9FF,#8ccfff,#1D7DFF,#1D7DFF); */
	}
</style>
<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		background-color: #36476f;
		width: 100%;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.content{
			font-size: 37upx;
			text-align: center;
		}
	}
	.translate-content{
		margin: 20upx 0;
		background-color: #FFFFFF;
		// border-radius: 15upx;
		padding: 0upx 0 15upx;
		.translate-curr-item{
			// border-bottom: 1upx solid #d5d5d5;
			display: flex;
			align-items: center;
			padding: 15upx 44upx 0 39upx;
			image{
				width: 100upx;
				height: 100upx;
				// border-radius:50upx;
				margin-right: 32upx;
			}
			.translate-curr-txt{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.translate-curr-txt-c{
					view{
						font-size: 28upx;
						font-weight: bold;
						color: #000000;
					}
					text{
						font-size: 22upx;
						color: #535353;
					}
				}
			}
		}
		.translate-num-item{
			padding: 0 60upx;
			.title{
				font-size: 24upx;
				color: #535353;
				padding: 32upx 0 0 0;
			}
			.content{
				border-bottom: 1upx solid #d5d5d5;
				display: flex;
				align-items: cecnter;
				justify-content: space-between;
				justify-items: center;
				padding: 42upx 33upx 16upx 0;
				text{
					width: 80upx; 
					font-size: 20upx;
					font-weight: bold;
					line-height: 42upx;
					height: 42upx;
					color: #36476f;
					border: #36476f 2upx solid;
					border-radius: 21upx;
					padding-left: 0;
					text-align: center;
				}
				input{
					padding-left: 20upx;
					flex: 1;
					line-height: 90upx;
					height: 90upx;
				}
			}
			text{
				color: #FF282D;
				font-size: 22upx;
				padding-left: 40upx;
			}
		}
		.translate-btn-item{
			width: 400upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 10upx;
			background-color: #36476f;
			font-size: 26upx;
			color: #FFFFFF;
			margin:30upx auto;
			margin-top: 60upx;
			text-align: center;
		}
	}
</style>